import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {
    Form, Input, DatePicker, Select, Button, Card, InputNumber, Radio, Icon, Switch, Cascader,
} from 'antd';
import styles from '../../../routes/style.less';
import {message} from "antd/lib/index";

const FormItem = Form.Item;
const {Option} = Select;

const {TextArea} = Input;
const RadioGroup = Radio.Group;

@connect(state => ({
    submitting: state.goodsCategory.loading,
}))
@Form.create()
export default class GoodsTypeEdit extends PureComponent {
    state = {
        parentId: '',
        parentNode:[],
        data: ''
    }

    componentDidMount() {
        const {record} = this.props;
        const {dispatch} = this.props;
        console.log("findParentNode");
        dispatch({
            type: 'goodsCategory/findParentNode',
            payload: {cat_id: record.cat_id},
            callback: (response) => {
                if (response.result === 0) {
                    this.setState({
                        parentNode: response.resultData.parentCategoryList
                    });

                } else {
                    message.success('失败');
                }
            }
        });
    }

    handleSubmit = (e) => {
        const editType=this.props.editType;
        const cat_id=editType==='add'?'':this.props.record.cat_id;
        console.log("====addd")
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log("测试editType" + editType);
                var parentId = 1;
                if (values["parent_node"].length > 0) {
                    parentId = values["parent_node"][values["parent_node"].length - 1];
                }
                console.log("=====addsva")
                this.setState({

                })
                this.props.dispatch({
                    type: `goodsCategory/${editType}`,
                    /*payload: values,*/
                    payload: {...values, cat_id: cat_id, parent_id: parentId},
                    callback: (response) => {
                        console.log("=====addend")
                        if (response.result === 0) {
                            message.success('提交成功');
                            this.props.handleModalSuccess(this.props.pagination);
                        } else {
                            message.error('提交失败');
                        }
                    }
                });
            }
        });
    }
    handleParentModalVisible = (e) => {
        console.log(this.props);
        this.props.handleModalVisible();
    }

    render() {
        const {submitting, record, editType, categorySList} = this.props;
        const {getFieldDecorator, getFieldValue} = this.props.form;
        const formInitValue = editType === 'add' ? {cat_sts: 1,is_show: 1, show_in_nav: 1} : record;
        const cat_id = editType === 'add' ? '' : record.cat_id;
        formInitValue.cat_sts=formInitValue.cat_sts ? 1: 0;
        formInitValue.is_show = formInitValue.is_show ? 1 : 0;
        formInitValue.show_in_nav = formInitValue.show_in_nav ? 1 : 0;

        const parent_id = editType === 'add' ? '' : formInitValue.parent_id;
        let a = [];
        a.push(parent_id);
        let parent_node = editType === 'add' ? [] : eval("["+formInitValue.parent_node+"]");
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        return (
            <Card bordered={false}>
                <Form
                    // onSubmit={this.handleSubmit}
                    hideRequiredMark
                >
                    <FormItem
                        {...formItemLayout}
                        label="分类名称"
                    >
                        {getFieldDecorator('cat_name', {
                            initialValue: formInitValue.cat_name || '',
                            rules: [{
                                required: true, message: '请输入分类名称',
                            }],
                        })(
                            <Input placeholder=""/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={<span>分类别名<em className={styles.optional}>（选填）</em></span>}
                    >
                        {getFieldDecorator('cat_alias_name', {initialValue: formInitValue.cat_alias_name || ''})(
                            <Input placeholder=""/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={<span>上级分类</span>}
                    >
                        {getFieldDecorator('parent_node', {initialValue: parent_node || []})(
                            <Cascader options={this.state.parentNode} changeOnSelect/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label={<span>关键字<em className={styles.optional}>（选填）</em></span>}
                    >
                        {getFieldDecorator('keywords', {
                            initialValue: formInitValue.keywords || '',
                        })(
                            <Input placeholder=""/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="顺序"
                    >
                        {getFieldDecorator('sort_order', {initialValue: formInitValue.sort_order || 100})(
                            <Input placeholder=""/>
                        )}<em className={styles.optional}>数字越大顺序越靠后</em>
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="状态"
                    >
                        {getFieldDecorator('cat_sts', {initialValue: formInitValue.cat_sts})(
                            <RadioGroup>
                                <Radio value={1}>在用</Radio>
                                <Radio value={0}>删除</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="导航栏显示"
                    >
                        {getFieldDecorator('show_in_nav', {initialValue: formInitValue.show_in_nav})(
                            <RadioGroup>
                                <Radio value={1}>显示</Radio>
                                <Radio value={0}>不显示</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="前台页面显示"
                    >
                        {getFieldDecorator('is_show', {initialValue: formInitValue.is_show})(
                            <RadioGroup>
                                <Radio value={1}>显示</Radio>
                                <Radio value={0}>不显示</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={<span>分类描述<em className={styles.optional}>（选填）</em></span>}
                    >
                        {getFieldDecorator('cat_desc', {initialValue: formInitValue.cat_desc || ''})(
                            <Input placeholder=""/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={<span>价格分级<em className={styles.optional}>（选填）</em></span>}
                    >
                        {getFieldDecorator('grade', {initialValue: formInitValue.grade || 100})(
                            <InputNumber placeholder="请输入" step={50} min={0} max={10000}/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={<span>拼音关键字<em className={styles.optional}>（选填）</em></span>}
                    >
                        {getFieldDecorator('pinyin_keyword', {initialValue: formInitValue.pinyin_keyword || ''})(
                            <Input placeholder=""/>
                        )}
                    </FormItem>
                    {/*style_icon	,//	分类样式图标*/}
                    {/*cat_icon	,//	分类图标*/}
                    {/*touch_icon	,//	触摸版图标*/}
                    <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                        <Button loading={submitting}
                                onClick={this.handleSubmit}>
                            提交
                        </Button>
                        <Button style={{marginLeft: 8}} onClick={this.handleParentModalVisible}>取消</Button>
                    </FormItem>
                </Form>
            </Card>
        );
    }
}
